<template>
	<div class="index" style="background: rgb(246, 248, 251);" >
    <van-nav-bar title="加盟站点" left-arrow  @click-left="onClickLeft" />
    <div style="padding:0.3rem; ">
      <div class="flexcc" style="height: 90vh;" v-if="!info">
        <img src="../../../static/img/jiameng.png" style="width: 4.5rem;" />
      </div>
      <div v-if="info">
        <div v-html="info" style="font-size: 12px;"></div>
      </div>
      <div style="position: fixed; bottom: 0.5rem; left: 0.5rem; width: 6.6rem;">
        <div @click="show = true" class="flexcc" style="background: rgb(0, 90, 255);  height: 0.9rem; box-shadow: 0px 0.1rem 0.2rem 0px rgba(0, 90, 255, 0.1); border-radius: 0.45rem; font-size: 0.31rem; color: rgb(255, 255, 255);">
          创建我的站点
        </div>
        <div @click="show2 = true" style="font-size: 14px; text-align: center; margin-top: 0.2rem;">已有站点 <span style="color:rgb(0, 90, 255); font-weight: bold; margin-left: 0.1rem;">登录</span></div>
      </div>

    </div>
    <van-popup v-model="show" round position="bottom">
      <div style="padding: 0.3rem; font-size: 0.26rem;">
        <div class="flexc">
          <div style="font-size: 0.4rem;"><van-icon name="friends" /></div>
          <div style="font-size: 0.3rem; font-weight: bold; margin-left: 0.1rem;">账号信息</div>
        </div>
        <div>
          <div style="margin-top: 0.2rem;" v-if="!jingdong_no"><van-field v-model="all.name" round placeholder="请输入登录账号名" /></div>
          <div style="margin-top: 0.2rem;" v-if="!jingdong_no"><van-field v-model="all.password" type="password" placeholder="请输入登录密码" /></div>
          <div style="margin-top: 0.2rem;"><van-field v-model="all.mobile" placeholder="请输入手机号" /></div>
          <div style="margin-top: 0.2rem;" v-if="sms_open == 1">
            <van-field  v-model="all.sms_code" maxlength="6"   center clearable placeholder="请输入短信验证码">
              <template #button>
                <div style="color: rgb(0, 90, 255);" @click="getcode(1)">{{yzm}}</div>
              </template>
            </van-field>
          </div>
          <div style="margin-top: 0.2rem;" v-if="isshoujissq !=0">
            <div style="margin-top: 0.2rem;">
              <van-field v-model="shengshiqu" placeholder="请选择省市区" readonly @click="selectShengShiQu()">
                <template #button>
                  <div style="color: rgb(0, 90, 255);" >
                    <img src="../../../static/img/xiasanjiao.png">
                  </div>
                </template>
              </van-field>
            </div>
            <!-- <el-cascader style="width: 100%;" @change="changeaddress" v-model="localcitycode" :options="options" class="borderless" placeholder="请选择省/市/区">
            </el-cascader> -->

          </div>
          <div style="margin-top: 0.2rem;"><van-field v-model="all.micro_stores_name" placeholder="请输入您的小店名称" /></div>
          <div style="margin-top: 0.2rem;" v-if="weixinall.openid">
            <van-checkbox v-model="checked" :disabled="jingdong_no" shape="square">绑定当前微信账号</van-checkbox>
          </div>
          <div @click="chuangjian(item)" class="flexcc" style="background: rgb(0, 90, 255);  height: 0.9rem; margin-top: 0.2rem; box-shadow: 0px 0.1rem 0.2rem 0px rgba(0, 90, 255, 0.1); border-radius: 0.45rem; font-size: 0.31rem; color: rgb(255, 255, 255);">确认创建</div>
        </div>
        <div @click="show2 = true" style="font-size: 14px; text-align: center; margin-top: 0.2rem;">已有站点 <span style="color:rgb(0, 90, 255); font-weight: bold; margin-left: 0.1rem;">登录</span></div>
      </div>
    </van-popup>
    <!-- 加盟界面选择省市区弹窗 -->
    <van-popup v-model="shengshiqushow" position="bottom" style="height:379.69px;">
			<van-area :area-list="areaList" :columns-placeholder="['请选择', '请选择', '请选择']" :value="nowcitycode" @confirm="queren" @cancel="quxiao" />
		</van-popup>

    <van-popup v-model="show4" round position="bottom">
      <div style="padding: 0.3rem; font-size: 0.26rem;">
        <div class="flexc">
          <div style="font-size: 0.4rem;"><van-icon name="friends" /></div>
          <div style="font-size: 0.3rem; font-weight: bold; margin-left: 0.1rem;">找回密码</div>
        </div>
        <div>
          <div style="margin-top: 0.2rem;"><van-field v-model="all.name" round placeholder="请输入找回密码的账号名" /></div>
          <div style="margin-top: 0.2rem;" v-if="sms_open == 1"><van-field v-model="all.mobile" placeholder="请输入手机号" /></div>
          <div style="margin-top: 0.2rem;" v-if="sms_open == 1">
            <van-field  v-model="all.sms_code"  maxlength="6"  center clearable placeholder="请输入短信验证码">
              <template #button>
                <div style="color: rgb(0, 90, 255);" @click="getcode(3)">{{yzm}}</div>
              </template>
            </van-field>
          </div>
          <div style="margin-top: 0.2rem;"><van-field v-model="all.passwd" type="password" placeholder="请输入新密码" /></div>
          <div style="margin-top: 0.2rem;"><van-field v-model="all.passwd_agin" type="password" placeholder="再次输入密码" /></div>
          <div @click="zhaohuimima()" class="flexcc" style="background: rgb(0, 90, 255);  height: 0.9rem; margin-top: 0.2rem; box-shadow: 0px 0.1rem 0.2rem 0px rgba(0, 90, 255, 0.1); border-radius: 0.45rem; font-size: 0.31rem; color: rgb(255, 255, 255);">确认找回</div>
        </div>

      </div>
    </van-popup>

    <van-popup v-model="show2" round position="bottom">
      <div style="padding: 0.3rem; font-size: 0.26rem;">
        <div class="flexc">
          <div style="font-size: 0.4rem;"><van-icon name="friends" /></div>
          <div style="font-size: 0.3rem; font-weight: bold; margin-left: 0.1rem;">账号登录</div>
        </div>

        <div v-if="!jingdong_no">
          <div style="margin-top: 0.2rem;"><van-field v-model="all2.name" round placeholder="请输入登录账号名" /></div>
          <div style="margin-top: 0.2rem;" v-if="!jingdong_no"><van-field v-model="all2.password" ref="mima" type="password" placeholder="请输入登录密码" /></div>

          <div style="margin-top: 0.2rem;" v-if="weixinall.openid">
            <van-checkbox v-model="checked" shape="square">绑定当前微信账号</van-checkbox>
          </div>
          <div @click="denglu()" class="flexcc" style="background: rgb(0, 90, 255);  height: 0.9rem; margin-top: 0.2rem; box-shadow: 0px 0.1rem 0.2rem 0px rgba(0, 90, 255, 0.1); border-radius: 0.45rem; font-size: 0.31rem; color: rgb(255, 255, 255);">登录</div>

          <!--<div @click="weixindenglu()" v-if="appid && weixinhuanjing" class="flexcc" style="background: #37C512;  height: 0.9rem; margin-top: 0.2rem; box-shadow: 0px 0.1rem 0.2rem 0px rgba(0, 90, 255, 0.1); border-radius: 0.45rem; font-size: 0.31rem; color: rgb(255, 255, 255);">微信登陆</div>-->
          <div style="text-align: center; position: relative; margin-top: 0.5rem;">
            还未加盟站点？
            <span style="color: rgb(0, 90, 255);" @click="show = true">注册加盟</span>
            <span style="position: absolute; right: 0px; color: rgb(0, 90, 255);" @click="wangjimima()">忘记密码？</span>
          </div>
          <!-- <div @click="weixindenglu()" v-if="appid && weixinhuanjing" class="flexcc" style="background: #37C512;  height: 0.9rem; margin-top: 0.2rem; box-shadow: 0px 0.1rem 0.2rem 0px rgba(0, 90, 255, 0.1); border-radius: 0.45rem; font-size: 0.31rem; color: rgb(255, 255, 255);">微信登陆</div> -->
        </div>

        <div v-if="jingdong_no">
          <div style="margin-top: 0.2rem;" v-if="sms_open == 1"><van-field v-model="all3.mobile" placeholder="请输入手机号" /></div>
          <div style="margin-top: 0.2rem;" v-if="sms_open == 1">
            <van-field  v-model="all3.code" maxlength="6"  center clearable placeholder="请输入短信验证码">
              <template #button>
                <div style="color: rgb(0, 90, 255);" @click="getcode3()">{{yzm}}</div>
              </template>
            </van-field>
          </div>
          <div style="margin-top: 0.2rem;" v-if="weixinall.openid">
            <van-checkbox v-model="checked" shape="square">绑定当前微信账号</van-checkbox>
          </div>
          <div @click="denglu3()" class="flexcc" style="background: rgb(0, 90, 255);  height: 0.9rem; margin-top: 0.2rem; box-shadow: 0px 0.1rem 0.2rem 0px rgba(0, 90, 255, 0.1); border-radius: 0.45rem; font-size: 0.31rem; color: rgb(255, 255, 255);">登录</div>
          <!-- <div @click="weixindenglu()" v-if="appid && weixinhuanjing" class="flexcc" style="background: #37C512;  height: 0.9rem; margin-top: 0.2rem; box-shadow: 0px 0.1rem 0.2rem 0px rgba(0, 90, 255, 0.1); border-radius: 0.45rem; font-size: 0.31rem; color: rgb(255, 255, 255);">微信登陆</div> -->
        </div>
      </div>
    </van-popup>

    <van-popup v-model="show3" round position="bottom" :close-on-click-overlay="false">
      <div style="padding: 0.3rem; font-size: 0.26rem;">
        <div class="flexc">
          <div style="font-size: 0.4rem;"><van-icon name="friends" /></div>
          <div style="font-size: 0.3rem; font-weight: bold; margin-left: 0.1rem;">请绑定已注册账号</div>
        </div>
        <div>
          <div style="margin-top: 0.2rem;"><van-field v-model="all2.name" round placeholder="请输入登录账号名" /></div>
          <div style="margin-top: 0.2rem;"><van-field v-model="all2.password" ref="mima" type="password" placeholder="请输入登录密码" /></div>
          <div style="margin-top: 0.2rem;">
            <van-checkbox v-model="checked">是否绑定当前微信账号</van-checkbox>
          </div>

          <div @click="bangding()" class="flexcc" style="background: rgb(0, 90, 255);  height: 0.9rem; margin-top: 0.2rem; box-shadow: 0px 0.1rem 0.2rem 0px rgba(0, 90, 255, 0.1); border-radius: 0.45rem; font-size: 0.31rem; color: rgb(255, 255, 255);">确定</div>
        </div>
      </div>
    </van-popup>
	</div>
</template>

<script>
import { random } from 'lodash';
import {CodeToText} from "element-china-area-data";
  var h = document.documentElement.clientWidth / 7.5 + 'px';
  document.documentElement.style.fontSize = h;
	export default {
		name: 'query',
    components:{},
		data() {
			return {
        show:false,
        show2:false,
        show3:false,
        show4:false,
        weixinall:"",
        shengshiqu: "",
        all:{
          name:"",
          password:"",
          mobile:"",
          sms_code:"",
          shop_id:"",
          micro_stores_name:"",
          passwd_agin:"",
          passwd:"",
          province:"",
          city:"",
          district:""

        },
        all2:{
          name:"",
          password:""
        },
        all3:{
          mobile:"",
          sms_code:"",
        },
        info:"",
        yzmnum:60,
        yzm:'获取验证码',
        yzmuse:true,
        jingdong:false,
        appid:"",
        weixinhuanjing:false,
        checked:true,
        jingdong_no:false,
        shengshiqushow:false,
        areaList:{
        },
        isshoujissq:'',
        sms_open:0
			}
		},
		async created() {
      await axios.get('/api/wechat/get').then((response)=>{
        console.log('response3333333333',response)
        	if (response.data.msg.code == 0) {

            this.appid  =  response.data.data

            var ua = window.navigator.userAgent.toLowerCase();
            if (ua.match(/micromessenger/i) == 'micromessenger') {
                 this.weixinhuanjing = true
            }
            if(this.appid && this.weixinhuanjing){
              if(this.$route.query.code){
                axios.get('/api/wechat/code2token?code='+this.$route.query.code).then((response)=>{
                  if (response.data.msg.code == 0) {
                   this.weixinall = response.data.data
                   //已绑定账号
                   if(response.data.data.wechat_register == 1){
                     axios.post('/api/wechat/login',{open_id:this.weixinall.openid}).then((response)=>{
                     	if (response.data.msg.code == 0) {
                        if(response.data.data.is_owner == 1){
                          location.href = location.origin + '/hou/shangpinguanli/zaishoushangpin'
                        }else{
                          location.href = location.origin + '/web'
                        }

                     	}else {
                         vant.Toast(response.data.msg.info);

                     	}
                     })
                   }else{
                     //未绑定账号 this.weixinall.openid
                   }
                  }else {
                    // vant.Toast(response.data.msg.info);
                    //code不对
                    this.weixindenglu()
                  }
                })
              }else{
                this.weixindenglu()
              }
            }
        	}else {
            vant.Toast(response.data.msg.info);
        	}
        })



      if(this.$route.query.shop_id){
        this.all.shop_id = window.atob(this.$route.query.shop_id)
      }
      this.getinfo()
      this.isShoujishengshiqu()
      if(location.hostname == 'kajia.vip' || location.hostname == 'cs.xiaoluohao.vip' || location.hostname == 'duotest.weibu.vip' || location.hostname == "localhost"){
        this.jingdong = true
      }
      // || location.hostname == 'localhost'
      if(location.hostname == 'kasading.cn' || location.hostname == 'localhost'){
        this.jingdong_no = true
      }



		},
		mounted() {
      document.title = "加盟站点"

		},
		methods: {
      weixindenglu:function(){

        let u = ''
        if(this.$route.query.shop_id){
          u = '?shop_id='+this.$route.query.shop_id
        }
        if(this.$route.query.shops_id){
          u = '?shops_id='+this.$route.query.shops_id
        }
        let url = location.origin + location.pathname + u

        // wxe9a853825d8c4b19
        window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid='+this.appid+'&redirect_uri='+encodeURIComponent(url)+'&response_type=code&scope=snsapi_base&state=123#wechat_redirect'
      },
      bangding:function(val){
        let obj = {}
        if(val == 'zhuce'){
          obj = {
            open_id:this.weixinall.openid,
            name:this.all.name,
            password:this.all.password,
            app_id:this.appid,
          }
        }
        if(val == 'denglu'){
          obj = {
            open_id:this.weixinall.openid,
            name:this.all2.name,
            password:this.all2.password,
            app_id:this.appid,
          }
        }


        axios.post('/api/wechat/login',obj).then((response)=>{
        	if (response.data.msg.code == 0) {

           axios.get('/agent/auth/user').then((response2)=>{
           	if (response2.data.msg.code == 0) {
              localStorage.setItem('user',JSON.stringify(response2.data.data))

              if(response.data.data.is_owner == 1){
                setTimeout(()=>{
                  location.href = location.origin + '/hou/shangpinguanli/zaishoushangpin'
                },500)
              }else{
                setTimeout(()=>{
                  location.href = location.origin + '/web'
                },500)
              }
           	}else {
               vant.Toast(response2.data.msg.info);
           	}
           })



        	}else {
            vant.Toast(response.data.msg.info);
        	}
        })
      },
      denglu:function(){

        axios.post(`/api/login`, this.all2)
        	.then(response=> {
        		if (response.data.msg.code == 0) {
              console.log(this.checked,this.appid)
              if(this.checked && this.appid && this.weixinhuanjing){
                this.bangding('denglu')
              }else{
                vant.Toast("登陆成功");
                axios.get('/agent/auth/user').then((response2)=>{
                	if (response2.data.msg.code == 0) {
                   localStorage.setItem('user',JSON.stringify(response2.data.data))

                   if(response.data.data.is_owner == 1){
                     setTimeout(()=>{
                       location.href = location.origin + '/hou/shangpinguanli/zaishoushangpin'
                     },500)
                   }else{
                     setTimeout(()=>{
                       location.href = location.origin + '/web'
                     },500)
                   }
                	}else {
                    vant.Toast(response2.data.msg.info);
                	}
                })

              }
        		}else{
              vant.Toast(response.data.msg.info);
            }
        	})
      },
      //获取验证码
      getcode: function(val) {
        var that = this;
        if(that.yzmuse){


          if (this.all.mobile.length != 11) {
          	vant.Toast("请输入正确手机号");
          	return;
          }

          that.yzmuse = false
          that.yzmnum = 60;
          that.timer = setInterval(function() {
          	if (that.yzmnum == 0) {
          		clearInterval(that.timer);
          		that.yzm = '获取验证码';
          		that.yzmuse = true
          	} else {
          		that.yzmuse = false
          		that.yzm = that.yzmnum + '秒重新获取';
          		that.yzmnum = that.yzmnum - 1;
          	}
          }, 1000);


          if(val == 1){
            axios.post(`/api/user/register/code/send`, {mobile:this.all.mobile,type:''})
            	.then(function(response) {
            		if (response.data.msg.code == 0) {
            			vant.Toast("验证码已发送");
            		}else{
                  vant.Toast(response.data.msg.info);
                }
            	})
          }

          if(val == 3){

          	var obg = {
          		mobile:this.all.mobile,
          		name:this.all.name
          	}
          	axios.post('/api/reset/code/send',obg).then((response)=>{
          		if (response.data.msg.code == 0) {
          			vant.Toast("验证码已发送");
          		} else {
          			vant.Toast(response.data.msg.info);
          		}
          	})
          }

        }
      },
      zhaohuimima:function(){
        if(this.all.name == ''){
        	vant.Toast('请输入用户名');
        	return
        }
        if (this.all.passwd != this.all.passwd_agin) {
        	vant.Toast("两次输入的密码不相同");
        	return;
        }
        var obg={
        	name:this.all.name,
        	mobile:this.all.mobile,
        	sms_code:this.all.sms_code,
        	passwd:this.all.passwd,
        	passwd_agin:this.all.passwd_agin,
        }
        axios.post('/api/password/reset',this.all).then((response)=>{
        	if (response.data.msg.code == 0) {
            vant.Toast('重置成功');
        		this.show4 = false
            this.show2 = true
        	} else {
        		vant.Toast(response.data.msg.info);
        	}
        })
      },
      wangjimima:function(){
        if(this.sms_open == 1){
          this.show4 = true
        }else{
          vant.Toast("请联系管理员重置密码");
        }
      },


      //京东获取验证码
      getcode3: function() {
        var that = this;
        if(that.yzmuse){
          if (this.all3.mobile.length != 11) {
          	vant.Toast("请输入正确手机号");
          	return;
          }
          that.yzmuse = false
          that.yzmnum = 60;
          that.timer = setInterval(function() {
          	if (that.yzmnum == 0) {
          		clearInterval(that.timer);
          		that.yzm = '获取验证码';
          		that.yzmuse = true
          	} else {
          		that.yzmuse = false
          		that.yzm = that.yzmnum + '秒重新获取';
          		that.yzmnum = that.yzmnum - 1;
          	}
          }, 1000);

          axios.post(`/api/user/login/code/send`, {mobile:this.all3.mobile})
          	.then(function(response) {
          		if (response.data.msg.code == 0) {
          			vant.Toast("验证码已发送");
          		}else{
                vant.Toast("发送失败");
              }
          	})
        }
      },
      //京东登录
      denglu3:function(){
        let obj = {
          open_id:this.weixinall.openid,
          mobile:this.all3.mobile,
          code:this.all3.code,
          app_id:this.appid,
        }
        axios.post(`/api/wechat/login2`, obj)
        	.then(response=> {
        		if (response.data.msg.code == 0) {

              if(this.checked && this.appid && this.weixinhuanjing){
                this.bangding('denglu')
              }else{
                vant.Toast("登陆成功");
                if(response.data.data.is_owner == 1){
                  setTimeout(()=>{
                    location.href = location.origin + '/hou/shangpinguanli/zaishoushangpin'
                  },500)
                }else{
                  setTimeout(()=>{
                    location.href = location.origin + '/web'
                  },500)
                }
              }
        		}else{
              vant.Toast(response.data.msg.info);
            }
        	})
      },


      chuangjian:function(){

        if(this.jingdong_no){
          this.all.name = this.all.mobile

          this.all.password = parseInt(Math.random()*1000000) + 'nb'
        }

        if(this.isshoujissq && (this.all.province==''||this.all.city==''||this.all.district=='')){
          vant.Toast('请选择省市区');
        }else{
          axios.post('/api/mstore/join',this.all).then((response)=>{
            if (response.data.msg.code == 0) {

            if(this.checked && this.appid && this.weixinhuanjing){
              this.bangding('zhuce')
            }else{
              vant.Toast("店铺创建成功");
              this.show = false
              setTimeout(()=>{
                location.href = location.origin + '/web'
              },500)
            }

            } else {
              vant.Toast(response.data.msg.info);
            }
         })
        }

      },
      onClickLeft:function(){
        this.$router.back(-1)
      },
      getinfo:function(){
        axios.get('/api/mstore/inv/des').then((response)=>{
        	if (response.data.msg.code == 0) {
           this.info = response.data.data.reseller_inv_des
        	} else {
            vant.Toast(response.data.msg.info);
        	}
        })
      },
      isShoujishengshiqu:function(){
        axios.get('/api/logo').then((response)=>{
        	if (response.data.msg.code == 0) {
            this.isshoujissq = response.data.data.region_collect
            this.sms_open = response.data.data.sms_open
        	} else {
            vant.Toast(response.data.msg.info);
        	}
        })
      },
      //点击选择省市区按钮
      selectShengShiQu(){
        // alert('123')
        this.shengshiqushow = true
        axios.get("https://static.91haoka.cn/areanew.json").then(response=> {
          console.log('response333',response)
					this.areaList = response.data
				})
      },
      //省市区确认
      queren: function(v) {
      	if (!v[0].code || !v[1].code || !v[2].code) {
      		vant.Toast('请完整选择省市区');
      		return false
      	}
      	this.all.province = v[0].name
      	this.all.city = v[1].name
      	this.all.district = v[2].name
        // this.all.province_code = v[0].code
        // this.all.city_code = v[1].code
        // this.all.district_code = v[2].code
      	this.shengshiqu = this.all.province + '  ' + this.all.city + '  ' + this.all.district
      	this.shengshiqushow = false
      },
      //省市区取消
      quxiao: function() {
      	this.shengshiqushow = false
      },
		}
	}
</script>


<style scoped lang="less">
  .index{
    .van-cell{ background: rgb(246, 248, 251);}
  }
</style>
<style  lang="less">
.el-cascader .el-input__inner {
    border: 0 !important;
	  background-color: #f6f8fb !important;
    border-radius: 0 !important;
  }
</style>
